<template>
	<view>
		<view class="loadingTxt" v-if="loadFlag">
			<loading></loading>
		</view>
		<template v-else>
			<view class="yyWrap">
				<view class="inner" :style="{minHeight:minHeight + 'px'}">
					<!-- 咨询人信息 -->
					<view class="modTit spaceBet">
						<view>咨询人信息</view>
						<view class="add" @tap="addZxr">
							<text class="iconfont icon-jia"></text>
							<text>添加咨询人</text>
						</view>
					</view>
					<zxr-info 
						:currZxr="currZxr"
						:currMobile="currMobile"
						:isHasDataFlag="isHasDataFlag" 
						@addZxr="addZxr" 
						@showPopup="showPopup"
					></zxr-info>
					<!-- 咨询方式 -->
					<view class="modTit spaceBet">
						<view>咨询方式<text class="tips">(建议选择面对面或视频咨询,咨询效果会更佳)</text></view>
					</view>
					<zx-type :canMdmZxTypeFlag="canMdmZxTypeFlag" @selectYyType="selectYyType" :typeIndex="typeIndex" :zxTypeArr="zxTypeArr"></zx-type>
					<!-- 面对面预约机构信息 -->
					<view class="ogzInfo" v-if="offLineFlag">
						<view class="ogzItem">
							<view class="ogzName spaceBet">
								<text>{{uoList[0].ogzName}}</text>
								<!-- <view class="goNavigation">
									<text>{{distance(uoList[0].distance)}}km</text>
								</view> -->
							</view>
							<view class="ogzAdd"><text class="iconfont icon-weizhi"></text><text>{{uoList[0].address}}</text></view>
							<view class="ogzTel" @tap="makePhoneCall(uoList[0].lxTel)"><text class="iconfont icon-dianhua1"></text><text>{{uoList[0].lxTel}}</text></view>
						</view>
					</view>
					<!-- 可预约时间 -->
					<view class="modTit spaceBet">
						<view>可预约时间</view>
					</view>
					<zx-time 
						:currDateIndex="currDateIndex"
						:clsIndex="clsIndex"
						:currParIndex="currParIndex"
						:currWeek="currWeek" 
						:dateList="dateList" 
						:classTimeList="classTimeList"
						@switchWeek="switchWeek"
						@selectClsTime="selectClsTime"
					></zx-time>
				</view>
				<view class="agree hasFlex" @tap="shouldAgree">
					<view class="check" :class="[isAgreeFlag ? 'active' : '']">
						<view class="iconfont icon-duihao"></view>
					</view>
					<view class="agreeTxt">我已知晓并同意<text class="detTxt" @tap.stop="goXlzxXy">《心理咨询协议》</text>和<text class="detTxt" @tap.stop="goXlzxBook">《心理咨询知情书》</text></view> 
				</view> 
			</view>
		</template>
		<template v-if="fromPageType == ''">
			<!-- 单次预约 -->
			<view class="yyBotBtnWrap">
				<!-- <use-yhq :couponMoney="couponMoney" @goSelYhq="goSelYhq"></use-yhq> -->
				<!-- <use-jf v-if="dkPrice > 0" :hasShadowFlag="false" :totalJf="totalJf" :currSelPrice="currSelPrice" @openJfDkPop="openJfDkPop"></use-jf> -->
				<!-- 确认预约 -->
				<yy-btn :totalPrice="totalPrice" :actMoney="actMoney" :couponPrice="couponPrice" :dkPrice="dkPrice" :jfTag="jfTag" @goPay="goPay"></yy-btn>
			</view>
			<!-- <uni-popup type="bottom" ref="useJfPop">
				<use-jf-pop :currJfTypeIndex="currJfTypeIndex" :totalJf="totalJf" :dkPrice="dkPrice" :dkJf="dkJf" @closeJfPop="closeJfPop" @switchUseJfType="switchUseJfType" @sureSelCurrType="sureSelCurrType"></use-jf-pop>
			</uni-popup> -->
			<!-- 选择使用优惠券 -->
			<!-- <uni-popup type="bottom" ref="selYhqPop">
				<sel-yhq 
					:yhqList="yhqList" 
					:getCouponId="getCouponId" 
					:useLen="useLen" 
					:unLen="unLen" 
					@selectYhqType="selectYhqType" 
					@viewUseIntro="viewYhqUseIntro" 
					@closeSelYhq="closeSelYhq"
					@goSelCurrYhq="goSelCurrYhq"
				></sel-yhq>
			</uni-popup> -->
			<!-- 优惠券使用说明 -->
			<!-- <uni-popup type="center" ref="yhqUsePop">
				<yhq-intro @closeYhqIntro="closeYhqIntro"></yhq-intro>
			</uni-popup> -->
		</template>
		<template v-else>
			<!-- 咨询套餐预约 -->
			<view class="yyBotBtnWrap">
				<zx-tc-yy :zxTcInfo="zxTcInfo" @goZxTcYy="goZxTcYy"></zx-tc-yy>
			</view>
		</template>
		<!-- 选择咨询人list -->
		<tui-bottom-popup :show="popupShow" @close="hidePopup" :radius="false">
			<view class="popupTit">切换咨询人</view>
			<view class="popuoView">
				<view class="zxrListItem"
					:class="[currIndex == index ? 'active' : '']"
					v-for="(item,index) in zxrList"
					:key="index"
					@tap="selectZxr(index)"
				>
					<view class="left">
						<text class="usename">{{item.zxrName}}</text>
						<text>{{item.zxrMobile}}</text>
					</view>
					<view class="right">
						<view class="iconfont icon-duihao"></view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	import ZxrInfo from './component/ZxrInfo'
	import ZxType from './component/ZxType'
	import ZxTime from './component/ZxTime'
	import ZxTcYy from './component/ZxTcYy'
	import yyBtn from './component/yyBtn'
	import UseYhq from '@/components/use-yhq/use-yhq'
	import SelYhq from '../yhqCen/components/SelYhq'
	import YhqIntro from '../yhqCen/components/YhqIntro'
	import { getZxUserList,getClassTimeList,getSpecClassTimeList,addZxOrder,getZxYhMoney } from '@/api/xlzx/index'
	import { getMyActCouponList } from '@/api/yhq/index'
	export default {
		components:{
			ZxrInfo,
			ZxType,
			ZxTime,
			ZxTcYy,
			yyBtn,
			UseYhq,
			SelYhq,
			YhqIntro
		},
		data(){
			return{
				loadFlag:true,
				minHeight:0,
				zxsName:'',
				popupShow: false,
				zxrList:[],
				isHasDataFlag:null,
				isRefreshFlag:false,
				currZxr:'',
				currMobile:'',
				currZxrId:'',
				currIndex:0,
				zxTypeArr:[
					{id:3,name:'面对面',iconName:'icon-mianduimian'},
					{id:1,name:'视频咨询',iconName:'icon-shipin'},
					{id:2,name:'语音咨询',iconName:'icon-dianhuayuyin'}
				],
				typeIndex:-1,
				canMdmZxTypeFlag:true,
				zxType:'',
				zxsUserId:'',
				useCity:'',
				dateList:[],
				classTimeList:[],
				currWeek:'',
				currDateIndex:0,
				currParIndex:-1,
				clsIndex:-1,
				uctId:'',
				classRange:'',
				yyFlag:true,
				uoList:[],
				offLineFlag:false,
				totalPrice:0,
				totalJf:0,
				dkPrice:0,
				dkJf:0,
				currSelPrice:'去选择',
				jfTag:-1,
				currJfTypeIndex:-1,
				actMoney:0,
				isAgreeFlag:false,
				couponMoney:'',
				couponPrice:0,
				yhqList:[],
				useCouponList:[],
				unCouponList:[],
				useLen:0,
				unLen:0,
				getCouponId:0,//优惠券Id
				fromPageType:'',//正常为空 咨询师订单&购买成功进来为zxTcType
				ustId:0,
				hasGkOgzFlag:false,//线下咨询师是否挂靠机构
				zxTcInfo:{}
			}
		},
		onLoad(options){
			this.currWeek = this.util.dateToWeek( this.util.getNowTimeDay() );
			this.zxsUserId = options.zxsUserId;
			this.zxsName = options.zxsName;
			this.fromPageType = options.fromPageType == undefined ? '' : 'zxTcType';
			if(this.fromPageType == 'zxTcType'){
				this.ustId = options.ustId;
			}else{
				this.checkOffLineOgz('');
			}
		},
		onShow(){
			this.getClassTimeList();//yyTag = 3;//可预约标记（1--可以预约,2:已满，3：休息）
			this.getZxUserList();
		},
		methods:{
			checkOffLineOgz(tmpRes){
				if(uni.getStorageSync('uoList') || this.hasGkOgzFlag){
					if(this.fromPageType == ''){
						this.uoList = uni.getStorageSync('uoList');
					}else{
						this.uoList = tmpRes.uoList;
					}
				}
				if(!uni.getStorageSync('uoList')){
					this.canMdmZxTypeFlag = false;
				}
			},
			//优惠券可用/不可用切换
			selectYhqType(index){
				this.yhqList = index == 0 ? this.useCouponList : this.unCouponList;
			},
			//选择优惠券
			goSelYhq(){
				let tmpDkPrice = this.currJfTypeIndex == 0 ? 0 : this.dkPrice;
				var field = { actMoney:this.totalPrice,scene:'zx',dkPrice:tmpDkPrice,useObj:this.zxsUserId,useCity:this.useCity };
				uni.showLoading({ title: '加载中...', mask: true });
				getMyActCouponList(field).then(res=>{
					let tmpRes = res.data.datas;
					//console.log(tmpRes)
					if(tmpRes.uselist != undefined){
						this.yhqList = tmpRes.uselist;
						this.useCouponList = tmpRes.uselist;
						this.unCouponList = tmpRes.unList
						this.useLen = this.useCouponList.length;
						this.unLen = this.unCouponList.length;
					}
					this.$refs.selYhqPop.open();
				}).catch(err=>{
					console.log(err)
				})
			},
			closeSelYhq(){
				this.$refs.selYhqPop.close();
			},
			//优惠券使用说明
			viewYhqUseIntro(){
				this.$refs.yhqUsePop.open();
			},
			closeYhqIntro(){
				this.$refs.yhqUsePop.close();
			},
			//选择优惠券
			goSelCurrYhq(id,couponMoney){
				let tmpDkPrice = this.currJfTypeIndex == 0 ? 0 : this.dkPrice;
				if(Number( tmpDkPrice ) + Number( couponMoney ) > this.totalPrice){
					this.util.showToast("数据有误");
					return;
				}
				this.getCouponId = id;
				this.couponMoney = '抵扣¥' + couponMoney;
				this.couponPrice = couponMoney;
				this.calcActMoneyJfYhq('yhq');
			},
			calcActMoneyJfYhq(opt){
				var field = { teaUserId:this.zxsUserId,getCouponId:this.getCouponId,isTag:this.jfTag }; 
				//console.log(field)
				getZxYhMoney(field).then(res=>{
					//console.log(res)
					let tmpRes = res.data.datas;
					this.actMoney = tmpRes.actMoney;
					if(opt == 'yhq'){
						this.$refs.selYhqPop.close();
					}else{
						this.$refs.useJfPop.close();
					}
				}).catch(err=>{
					//console.log(err)
					if(opt == 'yhq'){
						this.$refs.selYhqPop.close();
					}
				})
			},
			goXlzxBook(){
				uni.navigateTo({
					url:'../../protocol/protocol?xyId=13'
				})
			},
			goXlzxXy(){
				uni.navigateTo({
					url:'../../protocol/protocol?xyId=12'
				})
			},
			shouldAgree(){
				this.isAgreeFlag = !this.isAgreeFlag;
			},
			openJfDkPop(){
				if(this.actMoney > 0){
					this.$refs.useJfPop.open();
				}else{
					this.util.showToast("实付金额为0,暂不能使用积分抵扣")
				}
			},
			//切换是否使用积分抵扣
			switchUseJfType(index){
				this.jfTag = index;
				this.currJfTypeIndex = index;
				if(this.jfTag == 0){
					this.currSelPrice = '去选择';
				}else{
					this.currSelPrice = '抵扣¥' + this.dkPrice;
				}
				this.calcActMoneyJfYhq('jf');
			},
			//确定
			sureSelCurrType(){
				this.$refs.useJfPop.close();
			},
			closeJfPop(){
				this.$refs.useJfPop.close();
			},
			makePhoneCall(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			switchWeek(index,yyTag){
				if(yyTag == 1 || yyTag == 2){//可约 已满
					this.currDateIndex = index;
					this.currParIndex = -1;
					this.clsIndex = -1;
					this.classRange = '';
					this.uctId = '';
					this.getSpecClassTimeList();
				}
			},
			selectClsTime(parIndex,index,classRange,clsId,classStatus){
				if(classStatus == 1){
					this.currParIndex = parIndex;
					this.clsIndex = index;
					this.classRange = classRange;
					this.uctId = clsId;
				}
			},
			getSpecClassTimeList(){
				var field = { specDate:this.dateList[this.currDateIndex].workDate,userId:this.zxsUserId };
				getSpecClassTimeList(field).then(res=>{
					//console.log(res)
					this.classTimeList = res.data.datas;
				}).catch(err=>{
					console.log(err)
				}); 
			},
			//获取服务师当前日期一周内班次信息列表
			getClassTimeList(){
				let ogzId = uni.getStorageSync('mpOgzId');
				let field = { userId:this.zxsUserId,ogzId };
				if(this.fromPageType == 'zxTcType'){
					let tmpField = { ustId:this.ustId,lon:0,lat:0 }
					Object.assign( field,tmpField );
				}
				this.loadFlag = true;
				getClassTimeList(field).then(res=>{
					this.loadFlag = false;
					let tmpRes = res.data.datas;
					this.totalJf = tmpRes.totalJf;
					this.totalPrice = tmpRes.serviceFee;
					this.actMoney = tmpRes.actMoney;
					this.useCity = tmpRes.city;
					if(tmpRes.couponMoney > 0){
						this.couponPrice = tmpRes.couponMoney;
						this.couponMoney = '抵扣¥' + tmpRes.couponMoney;
						this.getCouponId = tmpRes.getCouponId;
					}else{
						this.couponMoney = '';
						this.getCouponId = 0;
					}
					if(tmpRes.dkPrice > 0){
						this.dkPrice = tmpRes.dkPrice;
						this.dkJf = tmpRes.dkJf;
						//this.currSelPrice = '优惠¥' + tmpRes.dkPrice;
						this.currJfTypeIndex = 0;
						this.jfTag = 0;
					}else{
						this.jfTag = 0;
						this.currJfTypeIndex = 0;
					}
					this.dateList = tmpRes.dateList;
					this.classTimeList = tmpRes.classTimeList;
					if(this.fromPageType == 'zxTcType'){//咨询套餐
						let zxTcInfo = { tcName:tmpRes.tcName,tcTimes:tmpRes.tcTimes,restTimes:tmpRes.restTimes }
						this.zxTcInfo = zxTcInfo;
						if(tmpRes.uoList.length > 0){
							this.hasGkOgzFlag = true;
						}
						this.checkOffLineOgz(tmpRes);
					}
					this.$nextTick(()=>{
						uni.createSelectorQuery().select('.yyBotBtnWrap').boundingClientRect(data => {
							this.minHeight = uni.getSystemInfoSync().windowHeight - data.height-100;
						}).exec()
					})
				}).catch(err=>{
					this.loadFlag = false;
					console.log(err)
				});
			},
			//2024-06-07新增咨询套餐预约
			goZxTcYy(){
				if(this.zxTcInfo.restTimes == 0){
					this.util.showToast('套餐次数已用完,请再次购买');
					return;
				}
				this.goPay();
			},
			goPay(){
				if(this.currZxrId == ''){
					this.util.showToast('请选择咨询人');
				}else if(this.zxType == ''){
					this.util.showToast('请选择咨询方式');
				}else if(this.uctId == ''){
					this.util.showToast('请选择可预约时间');
				}else if(!this.isAgreeFlag){
					this.util.showToast('请勾选心理咨询协议和心理咨询知情书');
					return;
				}else{
					var ogzId = uni.getStorageSync('mpOgzId');
					var field = { ogzId,zxuId:this.currZxrId,objId:this.zxsUserId,objName:this.zxsName,zxType:this.zxType,
									uctId:this.uctId},tmpField = null;
					if(this.fromPageType == ''){
						tmpField = { jfTag:this.jfTag,getCouponId:this.getCouponId };
					}else{//咨询套餐
						tmpField = { ustId:this.ustId }
					}
					Object.assign( field,tmpField );
					//console.log(field)
					if(this.yyFlag){
						this.yyFlag = false;
						addZxOrder(field).then(res=>{
							if(this.fromPageType == ''){
								//if(this.couponPrice == currZxPrice){//全抵券
								if(this.actMoney == 0){//全抵券
									uni.navigateTo({
										url:'../../subIndex/orderPay/orderPay?fromPage=yyPage&orderId='+ res.data.datas +'&yhqType=qdq',
										success:()=>{
											this.yyFlag = true;
										}
									})
								}else{
									uni.navigateTo({
										url:'../../subIndex/orderPay/orderPay?orderId=' + res.data.datas + '&fromPage=yyPage&jfTag=' + this.jfTag,
										success:()=>{
											this.yyFlag = true;
										}
									})
								}
							}else{//咨询套餐
								let remainTimes = Number( this.zxTcInfo.restTimes  ) - 1;
								uni.navigateTo({
									url:'../../subIndex/orderPay/orderPay?fromPage=zxTcYy&orderId='+ res.data.datas + '&tcName=' + this.zxTcInfo.tcName + '&remainTimes=' + remainTimes,
									success:()=>{
										this.yyFlag = true;
									}
								})
							}
						}).catch(err=>{
							this.yyFlag = true;
							console.log(err)
						});
					}
				}
			},
			selectYyType(index,id){
				this.typeIndex = index;
				this.zxType = id;
				if(this.zxType == '3' && this.uoList.length > 0){
					this.offLineFlag = true;
				}else{
					this.offLineFlag = false;
				}
			},
			selectZxr(index){
				this.currIndex = index;
				this.currZxr = this.zxrList[index].zxrName;
				this.currMobile = this.zxrList[index].zxrMobile;
				this.currZxrId = this.zxrList[index].id;
				this.hidePopup();
			},
			getZxUserList(){
				getZxUserList().then(res=>{
					this.isHasDataFlag = true;
					this.zxrList = res.data.datas;
					this.currZxr = res.data.datas[0].zxrName;
					this.currMobile = res.data.datas[0].zxrMobile;
					this.currZxrId = res.data.datas[0].id;
				}).catch(err=>{
					//console.log(err)
					if(err.data.code == 50001){
						this.zxrList = [];
						this.currZxr = '';
						this.currMobile = '';
						this.currZxrId = '';
						this.isHasDataFlag = false;
					}
				});
			},
			addZxr(){
				if(this.zxrList.length > 0){
					uni.navigateTo({
						url:'./zxrList'
					})
				}else{
					uni.navigateTo({
						url:'./addZxrInfo'
					})
				}
			},
			showPopup(){
				this.popupShow = true;
			},
			hidePopup(){
				this.popupShow = false;
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang='scss' scoped>
	.yyWrap{
		padding: 30rpx;
	}
	.yyBotBtnWrap{
		width: 100%;
		position: sticky;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index:100;
	}
	.ogzInfo{
		background: #fff;
		margin:20rpx 0 20rpx 0;
		.ogzItem{
			border-radius: 10rpx;
			box-shadow: 0 0 10rpx rgba(0,0,0,.1);
			padding: 20rpx 30rpx 30rpx;
			.ogzName{
				height: 60rpx;
				align-items: center;
				font-size: $font-size30;
				font-weight: bold;
				color: $pss-text-color3;
				.goNavigation{
					height: 100%;
					line-height: 60rpx;
					font-size: $font-size26;
					color: #fda915;
					padding-left: 60rpx;
					.icon-daohang{
						font-size: 24rpx;
					}
				}
			}
			.ogzAdd,
			.ogzTel{
				font-size: $font-size28; 
				color: $pss-text-colora;
				.icon-weizhi,
				.icon-dianhua1{
					margin-right: 10rpx;
					font-size: $font-size28; 
				}
			}
			.ogzAdd{
				margin-bottom: 10rpx;
			}
		}
	}
	.popuoView{
		padding: 0rpx 0 50rpx;
		.zxrListItem{
			height: 90rpx;
			line-height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				margin-left: 30rpx;
				font-size: $font-size28;
				color: $pss-text-color3;
				font-weight: bold;
				.usename{
					margin-right: 10rpx;
				}
			}
			.right{
				margin-right: 30rpx;
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				border:1rpx solid #eee;
				border-radius: 50%;
				text-align: center;
				.icon-duihao{
					font-size: $font-size24;
					color: #fff;
				}
			}
			&.active{
				background: $pss-bg-yellow;
				.right{
					background: $pss-color-primary_1;
					border:1rpx solid $pss-color-primary_1;
					color: #fff;
				}
			}
		}
	}
	.popupTit{
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: $font-size32;
		color: $pss-color-primary_1; 
		border-bottom: 1rpx solid #eee;
		font-weight: bold; 
	}
	.inner{
		border-radius: 20rpx;
		background: #fff;
		padding: 0 20rpx;
		.modTit{
			height: 80rpx;
			align-items: center;
			font-size: $font-size30;
			color: $pss-text-color3;
			font-weight: bold;
			.tips{
				font-size: $font-size24;
				color: $pss-text-colora;
				font-weight: normal;
				margin-left: 10rpx;
			}
			.add{
				height: 100%;
				padding-left: 80rpx;
				line-height: 80rpx;
				font-size: $font-size26; 
				color: $pss-color-primary_1;
				font-weight: normal;
				.icon-jia{
					font-size: $font-size24;
					margin-right: 5rpx; 
				}
			}
		}
	}
	.agree{
		position: relative;
		z-index: 10;
		margin-top: 20rpx;
		align-items: center;
		background: #fff;
		border-radius:20rpx;
		padding: 30rpx 0;
		.check{
			width: 24rpx;
			height: 24rpx;
			line-height: 24rpx;
			border:1rpx solid #eee;
			border-radius: 6rpx;
			margin: 0 10rpx 0 20rpx;
			text-align: center;
			.icon-duihao{
				font-size: $font-size22;
				color: #fff;
				opacity: 0;
			}
			&.active{
				border:1rpx solid $pss-color-primary;
				background: $pss-color-primary;
				.icon-duihao{
					color: #fff;
					opacity: 1;
				}
			}
		}
		.agreeTxt{
			font-size: $font-size24;
			color: $pss-text-colora;
			.detTxt{
				color: $pss-text-color3;
			}
		}
	}
</style>